
.free-sidenav {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 9950;

  &.free-sidenav-push {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;

    .free-sidenav-content {
      transform: translate(0, 0);
      transition: all .3s linear;
    }
  }

  .free-sidenav-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: rgba(0,0,0,.54);
    transition: all .3s linear;

    &.free-sidenav-outside {
      background: transparent !important;
    }
  }

  .free-sidenav-wrapper {
    position: absolute;
    width: 12.5rem;
    background: #fff;
    box-shadow: 5px 1px 40px rgba(0, 0, 0, 0.1);
  }

  &.free-sidenav-active {
    .free-sidenav-overlay {
      opacity: 1;
    }
  }

  &.free-sidenav-left {
    .free-sidenav-wrapper {
      top: 0;
      bottom: 0;
      left: 0;
    }
  }

  &.free-sidenav-right {
    .free-sidenav-wrapper {
      top: 0;
      bottom: 0;
      right: 0;
    }
  }

  &.free-sidenav-top,
  &.free-sidenav-bottom {
    .free-sidenav-wrapper {
      width: 100%;
      height: 10rem;
    }
  }

  &.free-sidenav-top {
    .free-sidenav-wrapper {
      top: 0;
      left: 0;
      right: 0;
    }
  }

  &.free-sidenav-bottom {
    .free-sidenav-wrapper {
      bottom: 0;
      left: 0;
      right: 0;
    }
  }
}
